<template>
  <div class="wrapper">
    <a-table
      ref="table"
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      :row-key="(record, index) => index"
      :scroll="{ y: 420 }"
      bordered
      class="dispatch-table"
      size="small"
    >
      <template
        v-for="col in editSlot"
        :slot="col"
        slot-scope="text, record, index"
      >
        <a-input-number
          :key="'slotColumns' + col + index"
          :min="0"
          :value="text"
          size="small"
          style="width: 100%"
          @change="e => numChange(e, index, col)"
        />
      </template>
    </a-table>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import * as _ from 'lodash'
export default {
  name: 'xxx',
  components: {},
  props: {},
  data() {
    return {
      editSlot: ['tunnelOtq', 'spillwayOtq', 'constantOtq'],
      columns: [
        {
          title: '时间',
          dataIndex: 'tm',
          width: 120,
          customRender: (text, record, index) => {
            return dayjs(text).format('YYYY-MM-DD HH')
          }
        },
        {
          title: '入库流量(m³/s)',
          dataIndex: 'inq',
          customRender: (text, record, index) => {
            return this.isNumeric(text) ? text : '--'
          }
        },
        {
          title: '泄洪洞流量(m³/s)',
          dataIndex: 'tunnelOtq',
          scopedSlots: { customRender: 'tunnelOtq' }
        },
        {
          title: '溢洪道流量(m³/s)',
          dataIndex: 'spillwayOtq',
          scopedSlots: { customRender: 'spillwayOtq' }
        },
        {
          title: '发电洞流量(m³/s)',
          dataIndex: 'constantOtq',
          scopedSlots: { customRender: 'constantOtq' }
        },
        {
          title: '出库流量(m³/s)',
          dataIndex: 'ouq'
        }
      ],
      dataSource: [
        {
          tm: '2025-09-17 10:00:00',
          inq: null,
          ouq: 0,
          tunnelOtq: 0,
          spillwayOtq: 0,
          constantOtq: 0
        },
        {
          tm: '2025-09-17 11:00:00',
          inq: null,
          ouq: 0,
          tunnelOtq: 0,
          spillwayOtq: 0,
          constantOtq: 0
        },
        {
          tm: '2025-09-17 12:00:00',
          inq: null,
          ouq: 0,
          tunnelOtq: 0,
          spillwayOtq: 0,
          constantOtq: 0
        },
        {
          tm: '2025-09-17 14:00:00',
          inq: null,
          ouq: 0,
          tunnelOtq: 0,
          spillwayOtq: 0,
          constantOtq: 0
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  activated() {},
  deactivated() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    isNumeric(value) {
      return !isNaN(parseFloat(value)) && isFinite(value)
    },
    numChange(num, index, col) {
      let originalValue = _.cloneDeep(this.dataSource)[index][col]
      this.$set(this.dataSource[index], col, num)
      for (let i = index + 1; i < this.dataSource.length; i++) {
        if (originalValue == this.dataSource[i][col]) {
          this.$set(this.dataSource[i], col, num)
        } else {
          break
        }
      }
      this.dataSource.forEach(item => {
        let ouq =
          (this.isNumeric(item.tunnelOtq) ? item.tunnelOtq : 0) +
          (this.isNumeric(item.spillwayOtq) ? item.spillwayOtq : 0) +
          (this.isNumeric(item.constantOtq) ? item.constantOtq : 0)
        item.ouq = Number(ouq.toFixed(3))
      })
    }
  }
}
</script>
<style scoped lang="less"></style>
